<template>
  <div class="container">

      <label for="name">姓名:</label>
      <input type="text" v-model="name">

      <label for="age">年龄:</label>
      <input type="number" v-model="age">

      <label for="height">身高:</label>
      <input type="number" step="0.1" placeholder="米" v-model="height">

      <label for="weight">体重:</label>
      <input type="number" id="weight" name="weight" placeholder="公斤">

      <label for="history">病史:</label>
      <input type="text" v-model="history">
      <br>
      <button @click="calculateBMI">诊断</button>
      <p v-show="bmiResult">患者  {{name }}的诊断结果: {{bmiResult}}</p>
  </div>
</template>

<script>


export default {
  data() {
    return {
      name: '',
      age: 0,
      height: 0,
      weight: 0,
      history: '',
      bmiResult: ''
    };
  },
  methods: {
    calculateBMI() {
      const bmi = (this.weight / (this.height * this.height)).toFixed(2);
   
        if (bmi <= 18.5) {
          this.bmiResult = '体重过轻';
        } else if (bmi <= 24.9) {
          this.bmiResult = '正常';
        } else if (bmi <= 29.9) {
          this.bmiResult = '体重过重';
        } else {
          this.bmiResult = '肥胖';
        }
    
    }
  }
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
</style>